<!--
@Author: 李朝晖 3016207275

@Date: 2018-12-12

@经理处理请假信息界面

@Last Modified time: 2018-12-16-->
<div class="box" style="margin: 5% 5% 5% 5%;float:left;width: 30%;text-align: center">
  <div class="box-header with-border">
    <div class="box-tools">
      <div class="input-group input-group-sm" style="width: 150px;">
        <input type="text" name="table_search" class="form-control pull-right" placeholder="查询可操作申请：">

        <div class="input-group-btn">
          <button class="btn btn-default" (click)="onSelect()"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </div>
    <h3 class="box-title">请假列表</h3>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <table class="table table-bordered">
      <tr>
        <th style="text-align:center">员工ID</th>
        <th style="text-align:center">请假时间</th>
        <th style="text-align:center">状态</th>
        <th style="width: 60px">类型</th>
        <th style="width: 60px">操作</th>
      </tr>
      <tr *ngFor="let leave of leaveRequest" (click)="lookSuggestion(leave.suggestion)">
        <td>{{leave.user_id}}</td>
        <td>{{leave.start_time}} ~ {{leave.end_time}}</td>
        <td>{{getState(leave.state)}}</td>
        <td><span class="badge bg-blue">{{getType(leave.type)}}</span></td>
        <td><a class="btn btn-danger btn-xs" (click)="getLeaveDetail(leave)">查看</a></td>
      </tr>
    </table>
  </div>
</div>
<div class="box box-primary" style="float:right;width: 55%;margin-right: 5%;margin-top: 5%;text-align: center" *ngIf="leave">
  <div class="box-body box-profile">
    <h3 class="profile-username text-center">{{user.name}}</h3>

    <p class="text-muted text-center">部门：{{user.department}}&nbsp;&nbsp;&nbsp;职位：{{user.position}}&nbsp;&nbsp;&nbsp;员工ID：{{user.id}}</p>

    <ul class="list-group list-group-unbordered">
      <div>
        <li class="list-group-item">
          <b>{{leave.type}}</b> <a class="pull-left">请假类型</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.duration}}</b> <a class="pull-left">请假时长</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <a class="pull-left">请假原因</a><br>
          <div>
            <b>{{leave.reason}}</b>
          </div>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.start_time}}</b> <a class="pull-left">开始时间</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.end_time}}</b> <a class="pull-left">结束时间</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{getState(leave.state)}}</b> <a class="pull-left">审批状态</a>
        </li>
      </div>
      <div class="box-body pad">
        <div>
          <textarea [(ngModel)]="suggest" class="textarea" placeholder="备注或建议..." style="width: 100%; height: 100px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
        </div>
      </div>


    </ul>

    <a class="btn btn-primary" (click)="onConfirm()" style="background:rgb(231, 231, 231);"><i class="fa fa-circle text-success"></i></a>
    <a class="btn btn-primary" (click)="onRefuse()" style="background:rgb(231, 231, 231); margin-left:10%;"><i class="fa fa-circle text-false"
        style=" color:orangered; "></i></a>
  </div>
  <!-- /.box-body -->
</div>

<div id="popup" *ngIf="suggestion" (click)="backSuggestion()">
    <div class="bg">
      <div class="box box-primary" style="float:left;width: 55%;margin-left:25%;margin-top: 15%;text-align: center">
        <div class="box-body box-profile">
          <h3 class="profile-username text-center">经理们的审批意见</h3>

          <div style="white-space: pre-line;">
            <li class="list-group-item">
              <div>
                <textarea class="textarea" readonly="readonly" style="width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                    {{suggestion}}
                </textarea>
              </div>
            </li>
          </div>
        </div>
      </div>
    </div>